<template>
  <div class="common_wrap">
    <div class="common_title">平台异常反馈处理</div>
    <el-form
      ref="queryForm"
      :model="queryParams"
      label-width="75px"
      inline
      class="search-nav"
    >
      <el-form-item prop="status" label="状态：">
        <el-select v-model="queryParams.status" clearable>
          <el-option
            v-for="(item, index) in statusList"
            :key="item.value + index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="date" label="期号">
        <el-select v-model="queryParams.date" clearable>
          <el-option
            v-for="(item, index) in dateList"
            :key="item.value + index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="indicator" label="提交人：">
        <el-select
          v-model="queryParams.indicator"
          placeholder="请选择提交人"
          filterable
          clearable
        >
          <el-option
            v-for="(item, i) in personList"
            :key="i"
            :value="item.empId"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >查询</el-button
        >
        <el-button
          type="primary"
          plain
          icon="el-icon-refresh"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table ref="table" v-loading="tableLoading" :data="tableData">
      <el-table-column
        prop="leader"
        label="提交人"
        align="center"
        width="100"
      />
      <el-table-column prop="gmtCreate" label="提交时间" align="center">
        <template slot-scope="scope">
          <span>{{ formateDate(scope.row.gmtCreate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="functionName" label="模块名称" align="center" />
      <el-table-column
        prop="moduleName"
        label="功能点"
        align="center"
        width="100"
      />
      <el-table-column
        prop="content"
        label="异常原因"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="feedbackStatus"
        label="状态"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <span>{{ formateStatus(scope.row.feedbackStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip
            content="处理"
            placement="top"
            v-show="scope.row.feedbackStatus == '0'"
          >
            <el-button
              type="primary"
              :circle="true"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            />
          </el-tooltip>
          <el-tooltip content="查看" placement="top">
            <el-button
              type="primary"
              :circle="true"
              icon="el-icon-document"
              @click="handleView(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-container"
      :background="true"
      :current-page="queryParams.current"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="queryParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <el-dialog :visible.sync="visible" title="详情" width="800px">
      <el-form class="edit_box">
        <div class="date flex">
          <div>模块名称：</div>
          <div>{{ currentRow.functionName }}</div>
        </div>
        <div class="quota_info flex">
          <div class="left flex">
            <div>提交人：</div>
            <div>{{ currentRow.leader }}</div>
          </div>
          <div class="right flex">
            <div>提交时间：</div>
            <div style="width: 200px">
              {{ formateDate(currentRow.gmtCreate) }}
            </div>
          </div>
        </div>
        <div class="inx_box flex">
          <div class="left flex">
            <div class="tit">异常原因：</div>
            <div
              class="old"
              style="
                width: 500px;
                min-height: 60px;
                text-align: left;
                padding-left: 10px;
              "
            >
              {{ currentRow.content }}
            </div>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" v-show="isEdit">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">处理</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PlateNoticeFeedback",
  data() {
    return {
      personList: [],
      statusList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "未处理",
          value: "0",
        },
        {
          label: "已处理",
          value: "1",
        },
      ],
      // 搜索条件
      queryParams: {
        status: "",
        date: "",
        indicator: "",
        current: 1, // 第几页
        size: 10, // 每页条数
      },
      total: 0, // 总条数
      tableLoading: false, // 表格loading
      tableData: [], // 表格数据
      dateList: [],
      signageList: [
        {
          label: "绿",
          value: 0,
        },
        {
          label: "红",
          value: 1,
        },
        {
          label: "蓝",
          value: 2,
        },
      ],
      visible: false,
      currentRow: {},
      form: {
        id: "",
      },
      isEdit: false,
    };
  },
  computed: {
    formateDate() {
      return function (datetime) {
        if (datetime) {
          const date = datetime.slice(0, 10);
          const time = datetime.slice(11, 19);
          return date + "  " + time;
        } else {
          return "";
        }
      };
    },
    formateStatus() {
      return function (card) {
        const cardNum = card / 1;
        switch (cardNum) {
          case 1:
            return "已处理";
          default:
            return "未处理";
        }
      };
    },
  },
  created() {
    this.getDateList();
    this.getPersonList();
    this.getTableData();
  },
  methods: {
    getDateList() {
      const params = {
        _gp: "issue",
        _mt: "list",
      };
      this.$api.commonApi(params).then((res) => {
        if (res.data.errno === 200) {
          this.dateList = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
        } else {
          this.dateList = [];
        }
      });
    },
    getPersonList() {
      const params = {
        page: 1,
        limit: 9999,
      };
      this.$api.empList(params).then((res) => {
        if (res.data.errno === 200) {
          this.personList = res.data.data.items;
        }
      });
    },
    resetQuery() {
      this.queryParams = {
        status: "",
        startDate: "",
        endDate: "",
        indicator: "",
        current: 1,
        size: 10,
      };
      this.getTableData();
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getTableData();
    },
    // 每页显示数量变化
    sizeChange(size) {
      this.queryParams.size = size;
      this.queryParams.current = 1;
      this.getTableData();
    },

    // 当前页变化
    currentChange(current) {
      this.queryParams.current = current;
      this.getTableData();
    },
    getTableData() {
      this.tableLoading = true;
      let year = "";
      let month = "";
      if (this.queryParams.date && this.queryParams.date.length === 7) {
        year = this.queryParams.date.slice(0, 4);
        month = this.queryParams.date.slice(5, 7) / 1;
      }
      const params = {
        feedbackStatus: this.queryParams.status,
        issueYear: year,
        issueMonth: month,
        employeeId: this.queryParams.indicator,
        page: this.queryParams.current,
        limit: this.queryParams.size,
      };
      this.$api.platformlList(params).then((res) => {
        this.tableLoading = false;
        if (res.data.data.code === 0) {
          this.tableData = res.data.data.items.map((item) => {
            let name = "";
            if (item.employeeVO) {
              name = item.employeeVO.name;
            }
            return {
              id: item.id,
              leader: name,
              content: item.content,
              feedbackStatus: item.feedbackStatus,
              functionName: item.functionName,
              moduleName: item.moduleName,
              gmtCreate: item.gmtCreate,
            };
          });
          this.total = res.data.data.total;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    handleView(row) {
      this.currentRow = row;
      this.visible = true;
      this.isEdit = false;
    },
    handleEdit(row) {
      this.currentRow = row;
      this.visible = true;
      this.isEdit = true;
    },
    close() {
      this.visible = false;
    },
    confirm() {
      const params = {
        id: this.form.id,
      };
      this.$api.updatePlate(params).then((res) => {
        if (res.data.errno == 200) {
          this.$message.success("提交成功");
          this.resetQuery();
          this.visible = false;
        } else {
          this.$message.fail(res.data.errmsg);
        }
      });
    },
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}
.edit_box .date {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.edit_box .date > div:first-child {
  color: #333;
  width: 100px;
  text-align: right;
}
.edit_box .quota_info {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.edit_box .quota_info .left > div:first-child,
.edit_box .quota_info .right > div:first-child {
  color: #333;
  width: 100px;
  text-align: right;
}
.edit_box .quota_info .left > div:last-child,
.edit_box .quota_info .right > div:last-child {
  width: 100px;
}
.edit_box .inx_box .left {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.edit_box .inx_box .left .tit {
  height: 28px;
  line-height: 28px;
  color: #333;
  width: 100px;
  text-align: right;
}
.edit_box .inx_box .left .old {
  width: 60px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background-color: #efefef;
  border: 1px solid #dcdcdc;
  margin-right: 20px;
}
.edit_box .inx_box .change {
  height: 28px;
  line-height: 28px;
  color: #2689fd;
  margin-right: 20px;
}
.edit_box >>> .el-input__inner {
  padding-right: 0;
}
.edit_box .inx_box .right {
  margin-left: 20px;
}
.edit_box .inx_box .right .tit {
  height: 28px;
  line-height: 28px;
  color: #333;
  margin-right: 20px;
}
.edit_box .inx_box .right .card {
  width: 50px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  background-color: #4ca5f1;
  margin-right: 20px;
}
.edit_box .inx_box .right .card.green {
  background-color: #5bc55a;
}
.edit_box .inx_box .right .card.red {
  background-color: #e43c26;
}
.edit_box .dgree_box .tit {
  color: #333;
  width: 100px;
  height: 28px;
  line-height: 28px;
  text-align: right;
}
.edit_box .dgree_box .content .tit {
  width: 60px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  margin-bottom: 20px;
  color: #666;
}
.blue {
  color: #4ca5f1;
}
.green {
  color: #5bc55a;
}
.red {
  color: #e43c26;
}
</style>